<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/AdmSystem/AdmList' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
    </el-breadcrumb>



    <el-table
      size="small"
      :data="pageData.rows
      .filter(data => !search.searchValue || 
    data[search.searchType].toLowerCase().includes(search.searchValue.toLowerCase()) )"
      style="width: 100%"
      height="360px"
    >
      <el-table-column label="管理员编号" prop="_id" width="190%"></el-table-column>
      <el-table-column label="管理员名字" prop="username"></el-table-column>
      <el-table-column label="管理员密码" >************</el-table-column>
      <el-table-column align="right" width="260%">
        <template slot="header" slot-scope="scope">
          <div class="f-left">
            <el-input v-model="search.searchValue" size="mini" placeholder="输入管理员名字搜索" />
          </div>
        </template>
        <template slot-scope="scope">
          <el-button size="mini"  @click="updateAdmin(scope.row)">修改</el-button>
          <!-- <template v-if="true"></template> -->
          <el-dialog title="修改信息" :visible.sync="centerDialogVisible" >
            <el-form >
              <el-form-item label="管理员名字：">
                <el-input  autocomplete="off" v-model="showAdm.username"></el-input>
              </el-form-item>
              <el-form-item label="管理员密码：">
                <el-input  autocomplete="off" v-model="showAdm.password"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" :plain="true" @click="updateadm()">确 定</el-button>
            </div>
          </el-dialog>

          <el-button
            size="mini"
            type="danger"
            @click="deleteadm(scope.row)"
            :plain="true"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table> 
      <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.currentPage"
        :page-sizes="[4,5,6,7]"
        :page-size="pageData.pageSize"
        layout="sizes, prev, pager, next"
        :total="pageData.total"
        
      ></el-pagination>
    </div>
    <div style="line-height:60px">
         <el-button size="mini" @click="Visible = true">新增管理员</el-button>
          <!-- <template v-if="true"></template> -->
          <el-dialog title="新增管理员" :visible.sync="Visible" >
            <el-form >
              <el-form-item label="管理员名字：">
                <el-input  autocomplete="off" v-model="addAdm.username"></el-input>
              </el-form-item>
              <el-form-item label="管理员密码：">
                <el-input  autocomplete="off" v-model="addAdm.password"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="Visible = false">取 消</el-button>
              <el-button type="primary" :plain="true" @click="addAdmOK()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("adm");

export default {
  data() {
    return {
      search: {
        searchType: "username",
        searchValue: ""
      },
      centerDialogVisible: false,
      Visible:false,
      newpassword:"",
      addAdm:{username:"",password:""},
      showAdm:{_id:"",username:"",password:""},
     
    };
  },
  computed: {
    ...mapState(["admlist","pageData"]),
  },
  created() {
    this.getadmAsync();
    // console.log(this.pageData);
  },
  methods: {
    ...mapMutations(["changepageSize", "changePage"]),
    // ...mapMutations(["updateStudents", "close"]),
    ...mapActions([
      "getadmAsync" , "addadmAsync" , "deleteadmAsync" ,"updateadmAsync" , "addadmAsync"
    ]),
   deleteadm(row){
     this.deleteadmAsync(row);
     this.getadmAsync();
   },
   updateadm(){
     this.updateadmAsync(this.showAdm);
     this.centerDialogVisible = false
     this.getadmAsync();
   },
   addAdmOK(){
     this.addadmAsync(this.addAdm);
     this.getadmAsync();
     this.Visible = false;
     this.addAdm = {username:"",password:""}
   },
    updateAdmin(row){
      this.centerDialogVisible = true;
      this.showAdm.username = row.username
      this.showAdm.password = ""
      this.showAdm._id = row._id
    },
    handleCurrentChange(val) {
      // console.log(val);
      this.changePage(val);
      this.getadmAsync();
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
     this.changepageSize(val);
      this.getadmAsync();
    },

  },
  
};
</script>

<style>


.el-breadcrumb {
  padding-left: 25px;
  height: 30px;
}
.el-table__header-wrapper .has-gutter tr th {
  line-height: 60px;
}
.has-gutter .cell{
  text-align: center;
  font-size: 14px;
}
.el-table__row .cell{
  text-align: center;
}
.is-right button{
  margin-right: 5px;
}
.el-dialog {
  width: 440px;
}
.el-form-item {
  padding: 0 40px;
}
.el-dialog__header {
  display: flex;
}
.el-dialog .el-input {
  width: 260px;
}
.el-dialog__close {
  display: none;
}
.dialog-footer{
  padding-right: 40px;
}

.el-pagination {
  margin-top: 10px;
  height: 30px !important;
}
.studentsImage{
  width: 50px;
}
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .bans{
    line-height: 60px;
  }
</style>